<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_猜数字练习</title>
</head>
<body>
<h3>已生成一个1~100的随机数</h3>
<input type="text" id="i1" placeholder="请输入你猜的数字！">
<button onclick="check()">点击验证</button>
<h3>提示信息：<span id="result"></span></h3>

<script>
    let n=parseInt(Math.random()*100)+1;
    console.log("小抄："+n);
    let count=0;
    function check(){
        let input=document.getElementById('i1').value;
        let num1=parseFloat(input);
        let result=document.querySelector('#result');
        //判断输入的值是否为数字
        //做合法性校验
        //isNaN()用于判断参数是否为非数字，如果是非数字，结果为true，否则为false
        // 正则表达式：^[0-9]+$ 使用一对正斜杠（/）用来包裹正则表达式
        // ^ 表示开头，$表示结尾，[0-9]表示0到9的数字，+表示至少一个，$表示结尾
        // .test()方法用于检测一个字符串是否匹配某个模式，如果匹配，则返回true，否则返回false。
        if (!/^\d+$/.test(num1)){
        //if(isNaN(num1)){
            alert("请输入数字！");
            //清除输入的内容
            document.getElementById('i1').value="";
            return;
        }
        //验证数字
        switch (true){
            case num1>n:
                count++;
                result.innerHTML="猜大了！";
                break;
            case num1<n:
                count++;
                result.innerHTML="猜小了！";
                break;
            default:
                count++;
                console.log(count);
                result.innerHTML="恭喜你用了"+count+"次，猜对了！";
        }
    }
</script>
</body>
</html>